<template>
  <div class="skus">
    <div
      style="color:#f5222d;font-size:14px"
      v-if="validateBag.status === 'error' && validateBag.field === 'sku'"
    >
      {{ validateBag.errorMsg }}
    </div>
    <div>
      <div
        class="tag"
        :class="index === currentSku ? 'active' : ''"
        v-for="(sku, index) in skus"
        :key="index"
        @click="handleSelectSku(index)"
      >
        {{ sku.name }}
        <a-icon
          type="close"
          v-if="skus.length > 1"
          style="cursor:pointer;10px"
          @click.stop="handleClose(index)"
        ></a-icon>
      </div>
      <div class="tag" @click="handleSkuSave">
        <a-icon type="plus"></a-icon>添加sku
      </div>
    </div>
    <div
      v-for="(sku, index) in skus"
      :key="'d-' + index"
      v-show="index === currentSku"
    >
      <a-form-item
        label="名称"
        :validate-status="
          index === validateBag.key && validateBag.field === 'name'
            ? validateBag.status
            : 'success'
        "
        :help="validateBag.errorMsg"
      >
        <a-input v-model="sku.name"></a-input>
      </a-form-item>
      <a-form-item
        label="封面"
        :validate-status="
          index === validateBag.key && validateBag.field === 'thumb'
            ? validateBag.status
            : 'success'
        "
        :help="validateBag.errorMsg"
      >
        <a-upload
          :beforeUpload="beforeUpload"
          @change="handleChange"
          class="img-uploader"
          name="img"
          listType="picture-card"
          :showUploadList="false"
          :action="uploadUrl"
        >
          <img
            v-if="sku.thumb"
            :src="sku.thumb"
            alt="avatar"
            style="width:128px;height:128px"
          />
          <div v-else>
            <a-icon :type="imgLoading ? 'loading' : 'plus'" />
            <div class="ant-upload-text">Upload</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item
        label="库存"
        :validate-status="
          index === validateBag.key && validateBag.field === 'stock'
            ? validateBag.status
            : 'success'
        "
        :help="validateBag.errorMsg"
      >
        <a-input-number v-model="sku.stock"></a-input-number>
      </a-form-item>
      <a-form-item
        label="价格"
        :validate-status="
          index === validateBag.key && validateBag.field === 'price'
            ? validateBag.status
            : 'success'
        "
        :help="validateBag.errorMsg"
      >
        <a-input-number v-model="sku.price"></a-input-number>
      </a-form-item>
      <a-form-item
        label="状态"
        :validate-status="
          index === validateBag.key && validateBag.field === 'status'
            ? validateBag.status
            : 'success'
        "
        :help="validateBag.errorMsg"
      >
        <a-switch
          v-model="sku.status"
          checkedChildren="上架"
          unCheckedChildren="下架"
        ></a-switch>
      </a-form-item>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    skus: {
      default: () => []
    },
    validate: {
      default: () => {
        return {
          status: "success",
          errorMsg: "",
          field: "sku"
        };
      }
    }
  },
  model: { prop: "skus" },
  data() {
    return {
      uploadUrl: process.env.VUE_APP_UPLOAD_URL,
      createVisible: false,
      imgLoading: false,
      currentSku: 0,
      createSku: {
        id: 0,
        name: "",
        thumb: "",
        stock: 0,
        price: 0,
        status: true
      }
    };
  },
  computed: {
    validateBag() {
      const validate = this.validate;
      let fieldAry = validate.field.split(".");
      let $return = {};
      if (fieldAry.length > 1) {
        $return.field = fieldAry[2];
        $return.key = fieldAry[1] * 1;
      } else {
        $return.field = "sku";
        $return.key = 0;
      }
      return {
        status: validate.status,
        errorMsg: validate.errorMsg,
        ...$return
      };
    }
  },
  methods: {
    handleClose(index) {
      this.skus.splice(index, 1);
      this.currentSku = 0;
    },
    handleSkuSave() {
      this.skus.push({ ...this.createSku });
      this.currentSku = this.skus.length - 1;
    },
    handleSelectSku(currentSku) {
      this.currentSku = currentSku;
    },
    handleChange(info) {
      if (info.file.status === "uploading") {
        this.imgLoading = true;
        return;
      }
      if (info.file.status === "done") {
        // Get this url from response in real world.
        this.$common.getBase64(info.file.originFileObj, () => {
          const res = info.file.response;
          this.skus[this.currentSku].thumb = res.code === 1 ? res.data.url : "";
          this.imgLoading = false;
        });
      }
    },
    beforeUpload(file) {
      const isJPG = file.type === "image/jpeg";
      if (!isJPG) {
        this.$message.error("You can only upload JPG file!");
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("Image must smaller than 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>

<style lang="less" scoped>
.skus {
  .tag {
    display: inline-block;
    border: 1px solid #91d5ff;
    margin-right: 8px;
    padding: 0 7px;
    border-radius: 5px;
    background: #e6f7ff;
    color: #1890ff;
    cursor: pointer;
    font-size: 12px;
    height: 22px;
    line-height: 20px;
  }
  .active {
    border-color: #40a9ff;
    color: #40a9ff;
    background: #ffffff;
  }
  .img-uploader > .ant-upload {
    width: 128px;
    height: 128px;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
}
</style>
